<template>
    <a-modal
      v-model:visible="visible"
      title="文章发布设置"
      @ok="submit(formRecord)"
      :okButtonProps="okButtonProps"
    >
      <a-form layout="vertical" :model="formRecord">
        <a-form-item v-bind="validateInfos.title">
          <a-input v-model:value="formRecord.title" placeholder="标题">
            <template #prefix>
              <EditOutlined />
            </template>
</a-input>
</a-form-item>
<a-form-item>
    <a-input v-model:value="formRecord.synopsis" placeholder="简介">
        <template #prefix>
              <ContainerOutlined />
            </template>
    </a-input>
</a-form-item>
<a-form-item>
    类型:
    <a-radio-group v-model:value="formRecord.type">
        <a-radio value="blog"> 日志 </a-radio>
        <a-radio value="book"> 读书 </a-radio>
    </a-radio-group>
</a-form-item>
</a-form>
</a-modal>
</template>

<script>
    import {
        Modal,
        Radio
    } from "ant-design-vue";

    import {
        EditOutlined,
        ContainerOutlined
    } from "@ant-design/icons-vue";
    import {
        useState
    } from "@u/hooks.js";
    import {
        computed,
        reactive
    } from "vue";
    import {
        useForm
    } from "@ant-design-vue/use";
    export default {
        components: {
            AModal: Modal,
            EditOutlined,
            ContainerOutlined,
            ARadio: Radio,
            ARadioGroup: Radio.Group,
        },
        setup(props, {
            emit
        }) {
            const [visible, setVisible] = useState(false);

            const formRecord = reactive({
                title: "",
                synopsis: "",
                type: "blog",
            });

            const rules = reactive({
                title: [{
                    required: true,
                    message: "title为必填",
                }, ],
            });

            const {
                validateInfos
            } = useForm(formRecord, rules);

            const okButtonProps = reactive({
                disabled: true,
                loading: false,
            });

            okButtonProps.disabled = computed(() => {
                const {
                    validateStatus
                } = validateInfos.title;
                const status = validateStatus === "success";
                return !status;
            });

            const submit = (record) => emit("submit", record);
            return {
                visible,
                setVisible,
                formRecord,
                submit,
                validateInfos,
                okButtonProps,
            };
        },
    };
</script>

<style>

</style>